<template>
  <div id="app">
    <div class="type_control">
      <span @click="changeView('2')">三天</span>
      <span @click="changeView('1')">日</span>
      <span @click="changeView('3')">列表</span>
      <span @click="changeView('4')">月视图</span>
      <span @click="gotoDate('2022-03-30')">toDate</span>
    </div>
    <OneDayCalendarSmall ref="oneDayCalendar" v-if="type === '1'" :data="{
      schedule: dataList,
      crossSchedule: crossDataList
    }" :options="{
  titleFormat: 'YYYY 年 M 月',
  crossDay: true,
  type: 'timeGridOneDay',
  filter: '.isSubscribed',
  fontSize: 14,
  lunar: false
}" @itemTouch="itemTouch" @itemDrop="itemDrop" @scaleDrop="scaleDrop" @turn="turnPage" />
    <WeekCalendarSmall ref="threeDaysCalendar" v-if="type === '2'" :data="{
      schedule: dataList,
      crossSchedule: crossDataList
    }" :options="{
  titleFormat: 'YYYY 年 M 月',
  crossDay: true,
  type: 'timeGridOneDay',
  filter: '.isSubscribed',
  fontSize: 20,
  lunar: false,
  hideWeekend: false,
  disabled: false
}" @itemTouch="itemTouch" @itemDrop="itemDrop" @scaleDrop="scaleDrop" @turn="turnPage" @dateClick="dateClick" />
    <ListCalendarSingle ref="listMeetingCalendar" v-if="type === '3'" :data="dataList" @scrollLoad="scrollLoad"
      @scrollToEnd="scrollToEnd" @dateClick="dateClick" @turn="turnListPage" :options="{
        itemHeight: 80,
        fontSize: 18,
        defaultCalendarClose: true,
        dotList: dotList,
        afternoon: false,
        // arrow: arrowHtml,
        isMeeting: true,
        lunar: true,
        disabled: false,
        enableScroll: true
      }" @scrollHandle="meetingScroll" />
    <MonthCalendar v-if="type === '4'" :data="dataList" :options="{ closePanel: true, fontSize: 14 }" @turn="turnPage"
      @itemTouch="itemTouch" @dateClick="dateClick">
      <template slot="nodata">111</template>
    </MonthCalendar>
  </div>
</template>

<script>
import moment from 'moment'
import _ from 'lodash'
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      type: '1',
      flag: false,
      dataForm: {
        timeType: "threeDay",
        // timeType: "list_view",
        inventoryIds: ["850328406657597440", "866708744879210496", "848885660637986816", "845261720438964224", '846780186224492544', '803629541841960960', '842771591912751104', '793872512332070912', '842767698667503616', '848885565452451840', '874695068248702976', '879727186708267008', '879741467914928128', '879743168227049472'],
        isInbox: true,
        beginDate: '2023-12-01',
        endDate: '2023-12-31',
        userIds: ['xiongwenjian@hq.cmcc', "liuhong@hq.cmcc", "taotao@hq.cmcc", "lijieit@hq.cmcc"]
      },
      tempList: [],
      tempCrossList: [],
      dataList: [],
      crossDataList: [],
      dotList: [],
      monthIndex: 0,
      arrowHtml: require('./assets/up-up.png')
    }
  },
  created() {
    // this.dataForm.beginDate = moment(new Date()).startOf('month').format("YYYY-MM-DD")
    // this.dataForm.endDate = moment(new Date()).add('1', 'month').endOf('month').format("YYYY-MM-DD")
    console.log(window.navigator.userAgent)
    this.getDataList(new Date())
    setTimeout(() => {
      this.dotList = ['2022-05-20', '2022-05-21', '2022-05-22', '2022-05-23']
    }, 1000)
    // this.getDataList()
    // this.getDataList('2021-12-01')
  },
  methods: {
    getDataList(date) {
      // this.dataForm.beginDate = date && moment(date).locale("zh-cn").format("YYYY-MM-DD")
      // this.dataForm.endDate = date && moment(date).locale("zh-cn").format("YYYY-MM-DD")
      this.dataForm.beginDate = date && moment(date).add(-7, 'days').locale("zh-cn").format("YYYY-MM-DD")
      this.dataForm.endDate = date && moment(date).add(14, 'days').locale("zh-cn").format("YYYY-MM-DD")
      this.$http({
        url: this.$http.adornUrl('/h5Schedule/scheduleBase/getScheduleList'),
        method: 'post',
        data: this.$http.adornData({
          ...this.dataForm
        }, false)
      }).then(({ data }) => {
        console.log(data)
        if (data.code === 200) {
          this.dataList = []
          this.crossDataList = []
          this.tempList = data.list.map(item => {
            const durationH = moment(item.scheduleEndDateStr).diff(item.scheduleStartDateStr, 'hour') > 0 ? moment(item.scheduleEndDateStr).diff(item.scheduleStartDateStr, 'hour') + '小时' : ''
            const durationM = moment(item.scheduleEndDateStr).diff(item.scheduleStartDateStr, 'minutes') % 60 > 0 ? moment(item.scheduleEndDateStr).diff(item.scheduleStartDateStr, 'minutes') % 60 + '分钟' : ''
            let meetingBg = ''
            if (item.meetingType === '00030000000000000000') {
              meetingBg = '#329900'
            } else if (item.meetingType === '00030043000000000000') {
              meetingBg = '#ff9906'
            } else {
              meetingBg = '#6799ca'
            }
            return {
              id: item.scheduleId,
              title: item.scheduleTheme,
              preTitle: item.subUserId ? item.sysCrtByName + '，' : '',
              // date: item.date,
              date: item.scheduleStartDate,
              start: item.scheduleStartDateStr,
              end: item.scheduleEndDateStr,
              status: item.colourStatus,
              acrossDay: item.acrossDay,
              dayCount: item.dayCount,
              addDay: item.addDay,
              isAllDay: item.isAllDay,
              place: item.meetingPlace,
              // className: item.subUserId ? 'isSubscribed' : '',
              // date: item.scheduleStartDate,
              helper: item.helper,
              // disabled: true,
              scheduleType: item.scheduleType,
              meetingTime: `${moment(item.scheduleStartDateStr).format('YYYY/MM/DD')} ${moment(item.scheduleStartDateStr).format('HH:mm')}`,
              meetingDuration: `${durationH}${durationM}`,
              meetingPlace: item.meetingPlace,
              meetingHost: item.meetingHost,
              attendMeetingGroupName: item.attendMeetingGroupName,
              undertakeGroupName: item.undertakeGroupName,
              meetingType: item.meetingTypeName?.substring(0, 2),
              meetingTypeBg: meetingBg,
              sysCode: item.sysCode,
              meetingFocus: item.attentionFlag,
              // preIcon: function (size) {
              //   return `<span style="display: inline-block;width: ${size}px;height: ${size}px;text-align:center;line-height: ${size}px;border-radius: 50%;border: 1px solid #6B7BDB;color: #6B7BDB;font-size: ${size - 2}px">会</span>`
              // }
            }
          }).filter(next => !next.acrossDay)
          this.tempCrossList = data.list.map(item => {
            return {
              id: item.scheduleId,
              title: item.scheduleTheme,
              preTitle: item.subUserId ? item.sysCrtByName + '，' : '',
              // date: item.date,
              date: item.scheduleStartDate,
              start: item.scheduleStartDateStr,
              end: item.scheduleEndDateStr,
              status: item.colourStatus,
              acrossDay: item.acrossDay,
              place: item.meetingPlace,
              className: 'isRed',
              disabled: true,
              preIcon: function (size) {
                return `<span style="display: inline-block;width: ${size}px;height: ${size}px;text-align:center;line-height: ${size}px;border-radius: 50%;border: 1px solid #6B7BDB;color: #6B7BDB;font-size: ${size - 2}px">会</span>`
              }
            }
          }).filter(next => next.acrossDay)
          // this.dataList = this.tempList
          this.crossDataList = this.tempCrossList
          Object.entries(_.groupBy(this.tempList, 'date')).forEach((key) => {
            this.dataList.push({
              date: key[0],
              list: key[1]
            })
          })
          // Object.entries(_.groupBy(this.tempCrossList, 'date')).forEach((key) => {
          //   this.crossDataList.push({
          //     date: key[0],
          //     list: key[1]
          //   })
          // })
          console.log(this.crossDataList)
        }
      })
    },
    itemTouch(item) {
      console.log('传了好几层', item)
    },
    itemDrop(item) {
      console.log('拖拽结束', item)
    },
    dateClick(t, flag) {
      console.log(t, flag)
      this.getDataList(t.date)
      // this.dataForm.beginDate = t.date
      // this.dataForm.endDate = t.date
      // this.getDataList()
    },
    scaleDrop(item) {
      console.log('缩放结束', item)
    },
    turnListPage(date) {
      this.dataForm.beginDate = date
      this.dataForm.endDate = date
      this.getDataList()
    },
    turnPage(date) {
      console.log('翻页', date)
      this.currentFirstDate = date
      // this.dataForm.beginDate = moment(date).startOf('month').add(-7, 'days').format("YYYY-MM-DD")
      // this.dataForm.endDate = moment(date).endOf('month').add(7, 'days').format("YYYY-MM-DD")
      this.getDataList(date)
      // this.flag = !this.flag
      // if (this.flag) {
      //   this.dataList = this.dataList2
      // } else {
      //   this.dataList = this.dataList1
      // }
    },
    scrollToEnd() {
      // this.monthIndex++
      // this.getDataList()
    },
    meetingScroll(direction, callback) {
      setTimeout(() => {
        if (direction === 'up') {
          callback('2022-04-26')
        } else if (direction === 'down') {
          // callback('2022-03-29')
          console.log('gud')
          callback('2022-04-28')
        }
      }, 500)
    },
    scrollLoad(date, dir) {
      console.log('当前所属月份', date)
      if (dir === 'up') {
        this.dataForm.beginDate = moment(date).startOf('month').format("YYYY-MM-DD")
        this.dataForm.endDate = moment(date).add(1, 'month').endOf('month').format("YYYY-MM-DD")
      } else {
        this.dataForm.beginDate = moment(date).add(-1, 'month').startOf('month').format("YYYY-MM-DD")
        this.dataForm.endDate = moment(date).add(1, 'month').endOf('month').format("YYYY-MM-DD")
      }
      this.getDataList()
    },
    gotoDate(date) {
      this.$refs.listMeetingCalendar.goToDate(date)
    },
    changeView(type) {
      this.type = type
      this.dataForm = {
        timeType: "threeDay",
        // timeType: "list_view",
        inventoryIds: [],
        isInbox: false,
        beginDate: '2021-08-01',
        endDate: '2021-08-31',
        userIds: []
      }
      this.getDataList()
      this.$nextTick(() => {
        if (type === '1') {
          this.$refs.oneDayCalendar.gotoDate(this.currentFirstDate)
        } else if (type === '2') {
          this.$refs.threeDaysCalendar.gotoDate(this.currentFirstDate)
        }
      })
    }
  }
}
</script>

<style lang="less">
body {
  margin: 0;
  user-select: none;
  /*background-color: #f5f6f7;*/
}

#app {
  height: 100vh;
}

.type_control {
  display: flex;
  position: absolute;
  z-index: 10;
  top: 0;

  span {
    background-color: #3e8ef7;
    color: #ffffff;
    margin-right: 5px;
    border-radius: 2px;
    display: inline-block;
    width: 40px;
    text-align: center;
    font-size: 12px;
  }
}

.isSubscribed {
  background-color: rgba(125, 218, 130, 1) !important;

  .schedule_title {
    color: #ffffff !important;
  }
}
</style>
